<template>
    <div>
        <hr style="border: 1px dashed darkgray;width: 90%;transform: scaleY(0.5);margin-bottom: 25px;margin-left: 60px">
        <div v-if="active" style="width: 90%;margin-left: 60px">
            <el-row>
                <el-col :span="3">
                    <el-input v-model="caseDecreaseSearch.searchData" clearable></el-input>
                </el-col>
                <el-col :span="3" :offset=1>
                    <el-select v-model="caseDecreaseSearch.select" filterable placeholder="请选择">
                        <el-option label="案号搜索" value="1"></el-option>
                        <el-option label="申请人搜索" value="2"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3" :offset=1>
                    <el-select v-model="caseDecreaseSearch.approveStatus" clearable>
                        <el-option label="审批中" value="1"></el-option>
                        <el-option label="审批通过" value="2"></el-option>
                        <el-option label="审批不通过" value="3"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3" :offset=1>
                    <el-select v-model="caseDecreaseSearch.sortMode">
                        <el-option label="自定义排序" value="1"></el-option>
                        <el-option label="编号倒序" value="2"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="1" :offset=1>
                    <el-button type="primary" @click="seniorSearch">检索</el-button>
                </el-col>
            </el-row>
            <el-table
                    :data="caseDecreaseData"
                    border
                    style="width: 100%;margin-top: 10px;margin-bottom: 10px">
                <el-table-column
                        align="center"
                        prop="caseNo"
                        label="案号"
                        width="149">
                    <template slot-scope="scope">
                        <a href="javascript:" @click="queryDetails(scope.row.id)">
                            {{scope.row.caseNo}}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="person"
                        label="申请人">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="decreaseMoney"
                        label="减免金额">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="applyDate"
                        label="申请日期">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="approveStatus"
                        label="审批状态"
                        :formatter="caseApproveStatusFormatter">
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="1"
                    :page-sizes="[1, 5, 10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <div v-if="!active">
            <CaseDetails :case-id="caseId" @back="back"></CaseDetails>
        </div>
    </div>
</template>

<script>
    import AddCaseService from "../../model/AddCaseService";
    import CaseDetails from "./CaseDetails";

    const addCaseService =AddCaseService.getInstance();
    export default {
        name: "CaseDecrease",
        components:{
            CaseDetails
        },
        data(){
            return{
                active:true,//显示与隐藏
                caseDecreaseData:[],//费用减免数据
                caseId:"",//案件id

                total:"",//数据总条数
                pageSize:5,//每页显示条数
                pageNum:1,//当前页

                caseDecreaseSearch:{//高级检索
                    searchData:"",//搜索框数据
                    select:"1",//下拉框选项
                    approveStatus:"",//审批状态
                    sortMode:"1",//排序方法
                },
            }
        },
        created() {
            this.queryDecrease()
        },
        methods:{
            handleCurrentChange(val){//当前页发生变化
                const page={
                    pageNum:val
                };
                this.queryDecrease(page);
            },
            handleSizeChange(val){//每页数据条数变化
                const page={
                    pageSize:val
                };
                this.queryDecrease(page);
            },
            back(){//回调函数
                this.active=true;
                this.queryDecrease(null);
            },
            seniorSearch(){//高级查询
                this.pageSize=5;
                this.queryDecrease(null)
            },
            queryDetails(id){//查看案件详情
                this.active=false;
                this.caseId=id;
            },
            caseApproveStatusFormatter(row, column, cellValue){//审批状态
                if(cellValue===1){
                    return "审批中"
                }else if(cellValue===2){
                    return "审批通过"
                }else{
                    return "审批不通过"
                }
            },
            queryDecrease(params){
                this.$loading({//懒加载
                    lock: true,
                    text: '正在查询...',
                    spinner: 'fa fa-refresh fa-spin fa-3x',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                const param={
                    searchData:this.caseDecreaseSearch.searchData,//搜索框数据
                    select:this.caseDecreaseSearch.select,//下拉框选项
                    approveStatus:this.caseDecreaseSearch.approveStatus,//审批状态
                    sortMode:this.caseDecreaseSearch.sortMode,//排序方法
                    hrEmpId:JSON.parse(localStorage["user"])[0].hrEmpId,
                    pageNum:params==null?this.pageNum:(params.pageNum===undefined?this.pageNum:params.pageNum),
                    pageSize:params==null?this.pageSize:(params.pageSize===undefined?this.pageSize:params.pageSize)
                };
                addCaseService.queryDecrease(this.$http,param).then(msg=>{
                    this.caseDecreaseData=msg.data.data.list;
                    this.total=msg.data.data.total;
                    this.pageSize=msg.data.data.pageSize;
                    this.$loading().close();
                })
            }
        }
    }
</script>

<style scoped>
    a{
        text-decoration: none;
    }
    a:link{
        color: blue;
    }
    a:visited{
        color: blue;
    }
    a:hover{
        color: red;
        text-decoration: underline;
    }
</style>